<template>
  <div v-if="detail_id" class="ui three column grid segment diverse mydetailCom">
    <div class="column">
      <div v-if="items_left" class="ui divided items segment  ">
          <detail_item  v-for="field in items_left" :field="field"></detail_item>

      </div>
  </div>
    <div class="column">
      <div v-if="items_middle" class="ui divided items segment  ">
          <detail_item  v-for="field in items_middle" :field="field"></detail_item>

      </div>
  </div>
    <div class="column">
      <div v-if="items_right" class="ui divided items segment  ">
        <detail_item  v-for="field in items_right" :field="field"></detail_item>

      </div>
      <detail_op v-if="detail_id"  :modalShow="modalShow" :items_all="items_all" :detail_id="detail_id" :ctl="ctl"></detail_op>
  </div>
  </div>
</template>

<script type="text/ecmascript-6">
import tool from 'src/util/tool';
import util from '_util/index';
import logic from '_logic';
import _ from 'lodash';

import fselect from 'components/form/select'
import detail_item from 'components/detail/detail_item'
import detail_op from 'components/detail/detail_op'

export default {
  data() {
    return {
      items:null,
      items_all:null,
      showFields:logic.detail.showFields(this.ctl)
    }
  },
  methods: {

    selectEvent(val,fname) {
      this.val=val
    },
    getDetail(id){
      if(id){
        this.showFields = logic.detail.showFields(this.ctl);

        let eventVue = util.store.get(this,'eventVue');
        eventVue.$emit('getDetailById',id);
        this.items_all=util.store.getResult(this, 'getDetailById');

        this.items = [];
        this.showFields.forEach(field=> {
          let obj = this.items_all.find(item=> {
            let tmp = `${item.field}#${item.title}`;
            return tmp == field;
          });
          this.items.push(obj);
        });

      }

    }
  },
  created(){
    this.getDetail(this.detail_id);
  },
  watch: {
    detail_id:function (val,old) {
      if(val) {
        this.getDetail(val);
      }

    }
  },
  computed: {
    items_chunked(){
      if(this.items&&this.items.length>0) {
        let chunked= logic.detail.get_chunked(this, this.ctl);
        return chunked;
      }
      return null;
    },
    items_left(){
      if(this.items_chunked&&this.items_chunked.length>0) {
        return this.items_chunked[0];
      }
      return null;
    },
    items_middle(){
      if(this.items_chunked&&this.items_chunked.length>0) {
        return this.items_chunked[1];
      }
      return null;
    },
    items_right(){
      if(this.items_chunked&&this.items_chunked.length>0) {
        return this.items_chunked[2];
      }
      return null;
    }
  },
  components: {
    fselect,detail_item,detail_op
  },
  props: ['ctl','detail_id','modalShow']
};
</script>

<style rel="stylesheet/less" scoped lang="less">
  .segment.diverse.mydetailCom {
    .item{
      color: #000;
    }
    
  }
</style>
